<template>
  <el-dialog :visible="dialogVisible"
             :close-on-click-modal="false"
             append-to-body
             custom-class="trace-centen-dailog"
             @close="onClose">
    <el-tabs v-model="activeName"
             type="card">
      <el-tab-pane label="批量更新"
                   name="batch">
        <el-form ref="form"
                 :model="infoForm"
                 label-width="85px"
                 size="small"
                 :rules="rules">
          <el-row>
            <el-col>
              <el-form-item label="建设单位:"
                            prop="constructionUnit">
                <el-select v-model="infoForm.constructionUnit"
                           filterable
                           allow-create
                           default-first-option
                           placeholder="建设单位">
                  <el-option v-for="item in options.constructionUnit"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="维护单位:"
                            prop="cbmu">
                <el-select v-model="infoForm.cbmu"
                           filterable
                           allow-create
                           default-first-option
                           placeholder="维护单位">
                  <el-option v-for="item in options.cbmu"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4">
              <el-form-item label="启用:">
                <el-switch v-model="infoForm.isEnabled"
                           active-value="TRUE"
                           inactive-value="FALSE"
                           active-color="#13ce66"
                           inactive-color="#ff4949">
                </el-switch>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <div slot="footer"
         class="dialog-footer">
      <el-button type="info"
                 @click="onClose"
                 size="small">取 消</el-button>
      <el-button type="primary"
                 size="small"
                 @click="updateSiteInfo">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { updateStbprpb } from '@/api/site'
import _ from 'lodash'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    multipleSelection: Array
  },
  data() {
    return {
      activeName: 'batch',
      options: {
        cbmu: [
          {
            label: null,
            value: null
          },
          {
            label: '我司',
            value: '我司'
          },
          {
            label: '非我司',
            value: '非我司'
          }
        ],
        constructionUnit: [
          {
            label: null,
            value: null
          },
          {
            label: '我司',
            value: '我司'
          },
          {
            label: '非我司',
            value: '非我司'
          }
        ]
      },
      // 表单验证规则
      rules: {
        cbmu: [
          { required: true, message: '请输入维护单位!', trigger: 'blur' }
        ],
        constructionUnit: [
          { required: true, message: '请输入建设单位!', trigger: 'blur' }
        ]
      },
      // 表单数据
      infoForm: {
        cbmu: null,
        constructionUnit: null,
        isEnabled: 'FALSE'
      }
    }
  },
  methods: {
    onClose() {
      this.$emit('close')
      this.fromResetField()
    },
    updateSiteInfo() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const params = _.assignIn({}, this.infoForm, {
            Id: this.multipleSelection
          })
          // 多选条件处理
          params.Id = params.Id.join(',')
          updateStbprpb(params).then(res => {
            if (res.data.success) {
              if (res.data.data) {
                this.$message({
                  type: 'success',
                  message: '修改成功!'
                })
                this.onClose()
              }
            }
          })
        }
      })
    },
    // 重置验证
    fromResetField() {
      this.$refs.form.resetFields()
    }
  }
}
</script>
